<!-- 新增分销机构管理 -->
<template>
  <div class="new-na">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="wrap">
      <p class="title">基本信息</p>
      <Form ref="formItem" :model="formItem" :rules="formRule" :label-width="90" label-position="left">
        <FormItem prop="companyUuid" label="uuid：">
          <Input type="text" readonly v-model="formItem.companyUuid" placeholder="无需填写，系统自动生成" style="width: 300px;"/>
        </FormItem>
        <FormItem prop="companyName" label="机构名称：">
          <Input type="text" v-model="formItem.companyName" placeholder="机构名称" clearable style="width: 300px;"/>
        </FormItem>
        <FormItem prop="status" label="机构状态：">
          <Select v-model="formItem.status" placeholder="机构状态" style="width: 300px;" filterable clearable>
            <Option v-for="item in MerchantStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="companyType" label="机构类型：">
          <Select v-model="formItem.companyType" placeholder="机构类型" style="width: 300px;" filterable clearable>
            <Option v-for="item in MerchantType" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="merchantCompanyId" label="所属商户：">
          <Select :disabled="$route.query.id ? true : false" v-model="formItem.merchantCompanyId" @on-change="getPartner" placeholder="所属商户" style="width: 300px;" filterable clearable>
            <Option v-for="item in companyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
          <FormItem label="省份城市：" prop="depc">
            <Cascader ref="pcz" :data="pcList" v-model="formItem.depc" @on-change="selectPc" @on-visible-change="onVisibleChange" :load-data="loadData" style="width: 300px;"></Cascader>
          </FormItem>
        <FormItem prop="address" label="详细地址：">
          <Input type="text" v-model="formItem.address" placeholder="详细地址" clearable style="width: 300px;"/>
        </FormItem>
        <FormItem prop="partnerInfoId" label="渠道经理：">
          <Select v-model="formItem.partnerInfoId" ref="manageSelect" placeholder="渠道经理" style="width: 222px;" filterable clearable>
            <Option v-for="item in merchantPartnerInfoList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          &nbsp;&nbsp;<Button type="success" @click="resetManage">不需要</Button>
        </FormItem>

<!--        <FormItem prop="isQFUser" label="巧房用户：" v-if="false">-->
<!--          <IsQfUser v-model="formItem.isQFUser"/>-->
<!--        </FormItem>-->
        <!-- <FormItem prop="provinceCode" label="管理员：">
          <Select v-model="formItem.provinceCode" placeholder="管理员" style="width: 300px;" filterable clearable>
            <Option v-for="item in statusList" :value="item.label" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="provinceCode" label="管理员账号：">
          <Input type="text" v-model="formItem.businessName" placeholder="管理员账号" clearable style="width: 210px;"/>
          &nbsp;&nbsp;<Button type="success">重置密码</Button>
        </FormItem> -->
        <div class="form-but">
          <Button type="success" @click="handleSubmit('formItem')">保存机构信息</Button>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
import Api from '@/api'
import IsQfUser from '@/components/IsQfUser';

const distributionApi = Api.Distribution
const commonApi = Api.Common
const companyApi = Api.Company

export default {
  name: 'newAgencies',
  components: {
    IsQfUser
  },
  data() {
    return {
      breadcrumb: ['分销机构管理', '新增分销机构'],
      formItem: {
        address: '',
        city: 0,
        companyName: '',
        companyType: '',
        merchantCompanyId: '',
        partnerInfoId: '',
        province: 0,
        status: '',
        zone: 0,
        depc: [],
        // isQFUser: ''
      },
      formRule: {
        companyName: [{ required: true, message: '此项必填', trigger: 'blur' }],
        address: [{ required: true, message: '此项必填', trigger: 'blur' }],
        companyType: [{
          required: true, type: 'number', message: '此项必填', trigger: 'blur'
        }],
        merchantCompanyId: [{
          required: true, type: 'number', message: '此项必填', trigger: 'blur'
        }],
        status: [{ required: true, message: '此项必填', trigger: 'blur' }],
        depc: [{
          required: true, type: 'array', message: '此项必填', trigger: 'blur'
        }],
        // isQFUser: [{ required: true, message: '此项必填', trigger: 'blur' }],

      },
      pcList: [],
      MerchantStatus: [
        {
          label: '启用',
          value: '2'
        },
        {
          label: '禁用',
          value: '3'
        },
      ],
      sfList: [
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      MerchantType: [
        {
          label: '中介',
          value: 1
        },
      ],
      merchantPartnerInfoList: [],
      companyList: [],
      rdepc: []
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          const id = this.$route.query.id
          const value = this.formItem
          delete value.createTime
          delete value.stationedCase
          delete value.depc
          const params = {
            ...value
          }
          const { responseCode, responseMessage, data } = await this.$request(id ? distributionApi.updateCompany : distributionApi.addCompany, params)
          if (responseCode === '1') {
            this.$Message.success(id ? '修改成功' : '新增成功！')
            this.$router.push({ path: '../distributionAgencies' })
          } else {
            this.$Message.error(id ? responseMessage || '修改失败！' : responseMessage || '新增失败！')
          }
        }
      })
    },
    resetManage() {
      this.$refs.manageSelect.clearSingleSelect()
    },
    // 渠道经理列表
    async getPartner(companyId) {
      const { responseCode, data } = await this.$request(distributionApi.listMerchantPartnerInfo, { companyId })
      if (responseCode === '1') {
        this.merchantPartnerInfoList = data
      }
    },
    // 分销机构列表
    async getCompanyList() {
      const { responseCode, data } = await this.$request(companyApi.listOptionCompany)
      if (responseCode === '1') {
        this.companyList = data
      }
    },
    // 省
    async getProvince() {
      const { responseCode, data } = await this.$request(commonApi.listProvince)
      if (responseCode === '1') {
        data.forEach((item, index) => {
          item.loading = false
          item.children = []
        })
        this.pcList = data
      }
    },
    async loadData(item, callback) {
      const len = item.__label.split('/').length
      item.loading = true
        const { responseCode, data } = await this.$request(commonApi.listCity, { provinceId: item.value })
        if (responseCode === '1') {
          if (len < 2) {
            data.forEach((city, index) => {
              city.loading = false
              city.children = []
            })
          }
          item.children = data
        }
        item.loading = false
        callback()
    },
    selectPc(value, selectedData) {
      this.formItem.province = value[0]
      this.formItem.city = value[1]
      this.formItem.zone = value[2]
    },
    onVisibleChange(v) {},
    async getDetail(id) {
      const { responseCode, data } = await this.$request(distributionApi.getCompany, { id })
      if (responseCode === '1') {
        data.depc = [data.province, data.city, data.zone]
        this.formItem = data
        this.getPartner(this.formItem.merchantCompanyId)
      }
    }
  },
  mounted() {
    this.getProvince()
    this.getCompanyList()
    const id = this.$route.query.id
    if (id) {
      this.getDetail(id)
    }
  },
}
</script>
<style lang="scss" scoped>
.new-na {
  padding-bottom: 70px;

  .wrap {
    width: 390px;
    margin: 0 auto;
    padding: 30px 0;
  }

  .title {
    font-size: 22px;
    font-weight: 600;
    padding: 20px 0 15px;
  }

  .form-but {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
